<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>单例模式-单一职责</title>
</head>

<body>
    <h2>单一职责</h2>
    <h2>分离惰性单例中的作用区间,可以创建任意类型的标签</h2>
    <h3>单例模式也可以多次调用只绑定一次事件</h3>

    <button id="loginBtn">登录</button>
    <div class="div1">div1</div>
    <script type="text/javascript">

        var createAlertLayout = function () {
            var div
            div = document.createElement('div')
            div.innerHTML = '我是一个弹窗'
            div.style.display = 'none'
            document.body.appendChild(div)
            return div
        }
        var createSingleIframe = function () {
            var iframe = document.createElement('iframe')
            document.body.appendChild(iframe)
            return iframe
        }
        var bindOnceEvent = function (selectorName) {
            document.querySelector(selectorName).onclick = function () {
                alert('click')
            }
            return true
        }
        var getSingle = function (fn) {
            var singleInstance
            return function () {
                return singleInstance || (singleInstance = fn.apply(this, arguments))
            }
        }
        var alertLayout = getSingle(createAlertLayout)
        var alertFrame = getSingle(createSingleIframe)
        var bindOnceEvent = getSingle(bindOnceEvent)

        document.querySelector('#loginBtn').addEventListener('click', function () {
            var loginLayout = alertLayout()
            var loginFrame = alertFrame()
            var OnceEvent = bindOnceEvent('.div1')

            loginLayout.style.display = loginLayout.style.display === 'block' ? 'none' : 'block'

        }, false)

    </script>

</body>

</html>